<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人注册</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<div class="registerHead">
    <div class="w">
        <img src="img/logo.jpg">
        <h2 class="welcome">欢迎注册</h2>
        <p class="goLogin fr">已有账号?<a href="login.html">请登录></a></p>
    </div>
</div>
<div class="container w">
    <div class="registerBox" id="vuebox">
        <ul class="process" id="stepName">
            <li>
                <div class="circle circle1" id="circleGreen">1</div>
                <span id="step1Finish">验证手机号</span>
            </li>
            <li>
                <div class="circle circle2">2</div>
                <span class="distance">填写账号信息</span>
            </li>
            <li>
                <div class="circle circle3">3</div>
                <span>注册成功</span>
            </li>
            <div class="actived" id="stepUnderline"></div>
        </ul>
        <!--第一步：输入手机号表单-->
        <form action="" class="phoneNumberForm" id="form1">
            <i class="icon-mobile-phone phoneIco"></i>
            <input type="text" placeholder="建议使用常用手机号" v-model="phone" name="phone" id="phone" class="inputPhoneNumber">
            <div>
                <span class="phoneCode">手机验证码</span>
                <input type="text" class="inputCode" v-model="code" placeholder="输入验证码">
                <input type="button" class="getCode" value="获取验证码" @click="sendCode()">获取验证码</input>
            </div>
            <div class="agreement">
                <input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:;">《MyWay网用户注册协议》</a>
            </div>
            <input type="button" class="nextRegister" id="nextStep" @click="nextStep()" value="下一步"></input>
        </form>


        <!--第二步：填写账号密码表单-->
        <form action="" class="accountInputForm" id="form2">
            <span class="setPassword">用户名</span>
            <input type="text" v-model="account" placeholder="您的账户名和登录名">
            <span class="setPassword">设置密码</span>
            <input type="password" v-model="password1" placeholder="建议使用两种或两种以上字符组合">
            <span class="ensurePassword">确认密码</span>
            <input type="password" v-model="password2" placeholder="请再次输入密码">
            <button type="button" class="soonRegister" id="goSuccess" @click="goSuccess()">立即注册</button>
        </form>
        <!--第三步：注册成功-->
        <div class="succesRegister" id="successStyle">
            <i class=" icon-time"></i>
            <h2>恭喜您</h2>
            <p>您已成功注册为MyWay用户，祝您购物愉快~</p>
            <a href="index.html">
                <button type="button" class="goShop">去购物</button>
            </a>
        </div>
    </div>
</div>

<!--底部信息栏开始-->
<div class="footer">
    <div class="slogen fl">
			<span class="item slogen2">
				<img src="img/slogen2.png">
			</span>
        <span class="item">
				<img src="img/slogen3.png">
			</span>
        <span class="item slogen1">
				<img src="img/slogen1.png">
			</span>
        <span class="item slogen4">
				<img src="img/slogen4.png">
			</span>
    </div>
    <div class="w">
        <div class="helpLink">
            <dl>
                <dt>- 新手帮助 -</dt>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">联系客服</a></dd>
                <dd><a href="#">意见反馈</a></dd>
            </dl>
            <dl>
                <dt>- 权益保障 -</dt>
                <dd>全国包邮</dd>
                <dd>7天无理由退货</dd>
                <dd>退货运费补贴</dd>
                <dd>限时发货</dd>
            </dl>
            <dl>
                <dt>- 支付方式 -</dt>
                <dd>微信支付</dd>
                <dd>支付宝</dd>
                <dd>白付美支付</dd>
            </dl>
            <dl>
                <dt>- 移动客户端下载 -</dt>
                <div class="downcode">
                    <ul>
                        <li class="down2">MyWay<img src="img/QRcode.png"></li>
                        <li>秀Style<img src="img/QRcode.png"></li>
                        <li>uni引力<img src="img/QRcode.png"></li>
                    </ul>
                </div>
            </dl>
        </div>
        <div class="map fr">
            <b>MyWay自营覆盖区县</b>
            <p>MyWay已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
            <p class="detail"><a href="#">查看详情 ></a></p>
        </div>
    </div>
    <div class="w">
        <div class="infowords">
            <ul>
                <li><a href="#">美丽说</a><span>|</span></li>
                <li><a href="#">淘粉吧</a><span>|</span></li>
                <li><a href="#">QQ钱包</a><span>|</span></li>
                <li><a href="#">时尚品牌网</a><span>|</span></li>
                <li><a href="#">我走我的路</a><span>|</span></li>
                <li><a href="#">装修</a></li>
            </ul>
        </div>
        <div class="copyright">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">招聘信息</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">商家后台</a></li>
                <li><a href="#">MyWay商学院</a></li>
                <li><a href="#">商家社区</a></li>
                <li><a href="#">规则中心</a></li>
                <li><a href="#">有害信息举报</a></li>
                <li class="copyname">&copy; MyWay.com 汉中陕理工网络有限公司</li>
            </ul>
            <br/>
            <ul class="infoBottom fl">
                <li>营业执照：913301065526808764<span>|</span></li>
                <li>网络文化经营许可证：汉网文（2016）0349-219号<span>|</span></li>
                <li>增值电信业务经营许可证：陕B2-20110349<span>|</span></li>
                <li>安全责任书<span>|</span></li>
                <li>陕公网安备 33010602002329号</li>
            </ul>
        </div>
    </div>
</div>
<!--底部信息栏结束-->
<script type="text/javascript">


</script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script>
    // sendCode
    var vm = new Vue({
        el: "#vuebox",
        data: {
            phone: "",
            code: "",
            account: "",
            password1: "",
            password2: ""
        },
        methods: {
            sendCode: function () {
                axios.get("http://localhost/user/manager/send/code", {
                    params: {
                        phone: this.phone
                    }
                }).then(res => {
                        if (res.data.result == "SUCCESS") {
                            alert("发送成功")
                        }
                    }
                )
            },
            nextStep: function () {
                axios.get("http://localhost/user/manager/checkCode", {
                    params: {
                        phone: this.phone,
                        code: this.code
                    }
                }).then(res => {
                        if (res.data.result == "SUCCESS") {
                            stepUnderline = document.getElementById("stepUnderline");//激活状态下划线
                            form1 = document.getElementById("form1");//手机号表单
                            form2 = document.getElementById("form2");//账号密码表单；
                            step1Finish = document.getElementById("step1Finish");//
                            circleGreen = document.getElementById("circleGreen");//圆圈序号
                            stepName = document.getElementById("stepName");//获取步骤
                            successStyle = document.getElementById("successStyle");
                            stepUnderline.style.marginLeft = "160px";
                            form1.style.display = "none";
                            form2.style.display = "block";
                            step1Finish.style.color = "green";
                            circleGreen.style.color = "green";
                            circleGreen.style.border = "1px solid green";
                        } else {
                            alert(res.data.message)
                        }
                    }
                )

            },
            goSuccess: function () {
                if (this.password1!=this.password2){
                    alert("两次输入密码不同")
                }else{
                    axios.post("http://localhost/user/manager/register", {
                        account: this.account,
                        password: this.password1,
                        phone: this.phone
                    }).then(res => {
                            if (res.data.result == "SUCCESS") {
                                stepUnderline = document.getElementById("stepUnderline");//激活状态下划线
                                form1 = document.getElementById("form1");//手机号表单
                                form2 = document.getElementById("form2");//账号密码表单；
                                step1Finish = document.getElementById("step1Finish");//
                                circleGreen = document.getElementById("circleGreen");//圆圈序号
                                stepName = document.getElementById("stepName");//获取步骤
                                successStyle = document.getElementById("successStyle");
                                stepName.style.display = "none";
                                form2.style.display = "none";
                                successStyle.style.display = "block";
                            } else {
                                alert(res.data.message)
                            }
                        }
                    )
                }


            }
        },
        mounted() {
        }
    })
</script>
</body>
</html>